---
import { useTranslations } from '../../i18n/util';
import { useTranslations as useStarlightTranslations } from '../../../node_modules/@astrojs/starlight/utils/translations';
import TableOfContentsList from '../../../node_modules/@astrojs/starlight/components/TableOfContents/TableOfContentsList.astro';
import type { Props } from '@astrojs/starlight/props';
import TutorialNav from '../tutorial/TutorialNav.astro';
import { Icon } from '@astrojs/starlight/components';
import FeedbackButton from '../tutorial/FeedbackButton.astro';

const isTutorial = Astro.props.entry.slug.split('/')[1] === 'tutorial';

const { locale, toc, editUrl, entry, isFallback } = Astro.props;
const t = useTranslations(Astro);
const starlightTranslations = useStarlightTranslations(locale);

const githubEditUrl =
	entry.data.githubURL && (locale === 'en' || isFallback)
		? `${entry.data.githubURL}${entry.data.hasREADME ? 'README.md' : ''}`
		: editUrl;
---

{
	toc && (
		<starlight-toc data-min-h={toc.minHeadingLevel} data-max-h={toc.maxHeadingLevel}>
			<nav aria-labelledby="starlight__on-this-page">
				<h2 id="starlight__on-this-page">
					{isTutorial
						? t('tutorial.trackerLabel')
						: starlightTranslations('tableOfContents.onThisPage')}
				</h2>
				{isTutorial ? (
					<TutorialNav {...Astro.props} />
				) : (
					<>
						<TableOfContentsList toc={toc.items} />
						<h2 class="contribute">{t('rightSidebar.contribute')}</h2>
						<ul>
							<li>
								<a href={`/${locale}/contribute/`}>
									<Icon name="open-book" /> {t('rightSidebar.contribute')}
								</a>
							</li>
							<li>
								<a href={githubEditUrl}>
									<Icon name="pencil" /> {t('rightSidebar.editPage')}
								</a>
							</li>
							<li>
								<a href="https://contribute.docs.astro.build/guides/i18n/">
									<Icon name="translate" /> {t('rightSidebar.translatePage')}
								</a>
							</li>
						</ul>
						<FeedbackButton />
					</>
				)}
			</nav>
		</starlight-toc>
	)
}

<style>
	ul {
		padding: 0;
		list-style: none;
	}

	.contribute {
		margin-top: 1rem;
	}
</style>

<script src="../../../node_modules/@astrojs/starlight/components/TableOfContents/starlight-toc"
></script>
